import React, { useState } from 'react'
import { Popup, Space, Button } from 'antd-mobile'
export default (props) => {
    const [visible1, setVisible1] = useState(false)
    return (
        <>
            <Space direction='vertical'>
                <>
                    <Button
                        onClick={() => {
                            setVisible1(true)
                        }}
                    >
                        底部弹出
                    </Button>
                    <Popup
                        visible={visible1}
                        onMaskClick={() => {
                            setVisible1(false)
                        }}
                        onClose={() => {
                            setVisible1(false)
                        }}
                        bodyStyle={{ height: '40vh' }}
                    >
                        <div>
                            {
                                props.arr.map(item => {
                                    return (
                                        <div key={item.id}>
                                            {
                                                item.val ? <item.name>{item.val}</item.name> : <item.name></item.name>
                                            }

                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Popup>
                </>
            </Space>

        </>
    )
}